/**
 * Created by FreezeSoul on 2018/10/17.
 */
define([
    "app/core/base",
    "app/core/util",
    "../../controls/common/commonMeta",
    "jquery",
    "underscore",
    'JSONParse',
    'loglevel',
    'jqueryTmpl',
    'css!app/plugins/project/menu-1/resources/menu.css'
], function (Chart, Util, Meta, $, _, JSON, log) {

    var property = {
        config: "property",
        option: [
            {
                group: '基础',
                id: 'data',
                name: '菜单数据',
                enable: false,
                type: 'text',
                value: '',
                default: '',
                link: 'menuData',
                tooltip: '菜单数据，以id:name样式，多个采用","分割,如1:aaa,2:bbb,3:ccc,4:ddd'
            },
            {
                group: '基础',
                id: 'labelFontColor',
                name: '字体颜色',
                enable: false,
                type: 'color',
                value: '#000000',
                default: '#000000',
                link: 'fontColor',
                tooltip: '字体颜色'
            },
            {
                group: '基础',
                id: 'LabelFontSize',
                name: '字体大小',
                enable: false,
                type: 'number',
                value: 14,
                default: 14,
                link: 'fontSize',
                tooltip: '文本字体大小'
            },
            {
                group: '基础',
                id: 'lineHeight',
                name: '文字行高',
                enable: false,
                type: 'number',
                value: 26,
                default: 26,
                link: 'lineHeight',
                tooltip: '文字行高'
            },
            {
                group: '基础',
                id: 'backGroundColor',
                name: '背景色',
                enable: false,
                type: 'color',
                value: '#000000',
                default: '#000000',
                link: 'bgColor',
                tooltip: '弹出层背景色'
            },
            {
                group: '事件',
                id: 'event',
                name: '菜单点击事件',
                enable: false,
                type: 'script',
                value: '',
                default: '',
                link: 'clickHandle',
                tooltip: '菜单事件脚本，this._selectedItem为当前选中对象'
            },
        ].concat($.extend(true, [], Meta.commonProperties)),
        MapOption: function (option) {
            Util.linkOption(this.option, option);
        }
    };

    var label = Chart.extend({
        constructor: function (layout) {
            this._layout = layout;
            this._menu = null;
            this._container = null;
            this._selectedItem = null;
            this._isShowMenu = false;
            this._topZIndex = 999999;
            this._template = '<ul class="menu-1-select" style="${menu_1_select}">' +
                '  <li>' +
                '     <div class="menu-1-select-head">' +
                '       <span class="menu-1-select-head-cont"></span>' +
                '       <span class="menu-1-select-head-icon">▼</span>' +
                '     </div>' +
                '     <ul class="menu-1-select-option" style="${menu_1_select_option}">' +
                '     </ul>' +
                '  </li>' +
                '</ul>';

            this._option = {
                Series: [],
                Events: [],
                Extend: $.extend(true, {}, property),
                Option: {
                    uuid: '',
                    class: '',
                    display: true,
                    fontColor: "#000000",
                    bgColor: 'rgba(0,0,0,0.9)',
                    fontSize: 24,
                    lineHeight: 30,
                    menuData: '1:aaa,2:bbb,3:ccc,4:ddd',
                    clickHandle: '',
                    initScript: '',
                    disposeScript: ''
                }
            };
        },
        init: function (element) {
            try {
                this._container = element;
            } catch (e) {
                log.error(e);
            }
        },
        _readProperty: function () {
            try {
                if (!this._option.Extend) return;
                Util.deepMapOption(property, this._option.Extend, this._option.Option);
            } catch (e) {
                log.error(e);
            }
        },
        _render: function (option) {
            var _this = this;

            var optionCopy = $.extend(true, {}, option);

            optionCopy.menu_1_select = "font-size:" + this._option.Option.fontSize + "px;color:" + this._option.Option.fontColor + ";line-height:" + this._option.Option.lineHeight + "px;";
            optionCopy.menu_1_select_option = "background-color:" + this._option.Option.bgColor + ";";

            var $element = $.tmpl(this._template, optionCopy);
            var data = [];
            var menuDataList = this._option.Option.menuData.split(",");
            for (var i = 0; i < menuDataList.length; i++) {
                var menuItemArray = menuDataList[i].split(":");
                if (menuItemArray.length === 2) {
                    data.push({id: menuItemArray[0], text: menuItemArray[1]});
                }
            }
            var $ulContent = $element.find(".menu-1-select-option");
            $.tmpl("<li class='menu-1-select-option-item' data-id='${id}'>${text}</li>", data).appendTo($ulContent);

            $(this._container).empty();
            $element.appendTo(this._container);


            var $selectHead = $element.find(".menu-1-select-head");
            var $selectHeadCont = $element.find(".menu-1-select-head-cont");
            var $option = $element.find(".menu-1-select-option");
            var $optionItem = $element.find(".menu-1-select-option-item");

            $selectHeadCont.text($optionItem.first().text());

            $selectHead.click(function () {
                if (!_this._isShowMenu) {
                    $option.css("display", "block");
                    _this._isShowMenu = true;
                } else {
                    $option.css("display", "none");
                    _this._isShowMenu = false;
                }
                var $layoutObj = $(_this._container).parent().parent();
                var currentIndex = parseInt($layoutObj.css("z-index"));
                if (currentIndex !== _this._topZIndex) {
                    _this._lastIndex = currentIndex;
                }
                if (_this._isShowMenu) {
                    $layoutObj.css("z-index", _this._topZIndex);
                } else {
                    $layoutObj.css("z-index", _this._lastIndex);
                }
            });

            this._selectedItem = {id: $optionItem.first().data("id"), text: $optionItem.first().text()};

            $optionItem.click(function () {
                $selectHeadCont.text($(this).text());

                $option.css("display", "none");
                _this._isShowMenu = false;

                var $layoutObj = $(_this._container).parent().parent();
                $layoutObj.css("z-index", _this._lastIndex);

                _this._selectedItem = {id: $(this).data("id"), text: $(this).text()};

                Util.evalJavaScript(_this, _this._option.Option.clickHandle);
            });

            //Util.setCommonMeta(this, this._container, this._option.Option);

            return $element;
        },
        setSeletedItem: function (id) {
            var menuOptions = $(this._menu).find(".menu-1-select-option-item");
            $.each(menuOptions, function () {
                if($(this).data("id") === id){
                    $(this).trigger( "click" );
                }
            });
        },
        example: function () {
            try {

                var exampleOption = {
                    uuid: '',
                    class: '',
                    display: true,
                    menuData: '1:aaa,2:bbb,3:ccc,4:ddd',
                    bgColor: 'rgba(0,0,0,0.9)',
                    clickHandle: '',
                    initScript: '',
                    disposeScript: ''
                };

                this._menu = this._render(exampleOption);
            } catch (e) {
                log.error(e);
            }
        },
        setData: function () {
            try {
                this._readProperty();
                this._menu = this._render(this._option.Option);
            } catch (e) {
                log.error(e);
            }
        },
        setOption: function (option) {
            try {
                return this._option = $.extend(true, {}, option);
            } catch (e) {
                log.error(e);
            }
        },
        getOption: function () {
            try {
                this._readProperty();
            } catch (e) {
                log.error(e);
            }
            return this._option;
        },
        setTheme: function (theme) {
            try {
            } catch (e) {
                log.error(e);
            }
        },
        resize: function () {
            try {
            } catch (e) {
                log.error(e);
            }
        },
        showLoading: function () {
            try {
                if (this._layout && this._layout.showLoading) {
                    this._layout.showLoading(this);
                }
            } catch (e) {
                log.error(e);
            }
        },
        hideLoading: function () {
            try {
                if (this._layout && this._layout.hideLoading) {
                    this._layout.hideLoading(this);
                }
            } catch (e) {
                log.error(e);
            }
        },
        dispose: function () {
            try {
                $(this._menu).off().remove();
            } catch (e) {
                log.error(e);
            }
        },
        getElement: function () {
            return this._menu;
        },
        getChart: function () {
            return this._menu;
        }
    });

    return {
        Chart: label,
        Property: property
    };
});